import { Input, Select } from 'antd';
import { FC, useEffect, useMemo, useState } from 'react';
import styles from './index.less';
type ValueType = {
  price?: string | number;
  staging?: string;
};
interface Props {
  value?: ValueType;
  onChange?: (value: ValueType) => void;
  options?: { label: string; value: string }[];
}
const Index: FC<Props> = ({ onChange, value, options }) => {
  const _options = useMemo(
    () => [
      {
        label: '不分期',
        value: '0',
      },
      {
        label: '3期 (免手续费)',
        value: '1',
      },
      {
        label: '6期 (手续费2%)',
        value: '2',
      },
      {
        label: '6+3期',
        value: '3',
      },
    ],
    [],
  );
  const [val, setVal] = useState<ValueType>({
    price: undefined,
    staging: undefined,
  });
  const update = (value) => {
    if (onChange) {
      onChange?.(value);
    } else {
      setVal(value);
    }
  };
  const onPriceChange = (evt) => {
    update({
      ...val,
      price: evt.target.value,
    });
  };
  const onStagingChange = (staging) => {
    update({
      ...val,
      staging,
    });
  };
  useEffect(() => {
    if (value) {
      setVal(value);
    } else {
      setVal({
        price: undefined,
        staging: undefined,
      });
    }
  }, [value]);
  return (
    <div className={styles.container}>
      <Input
        value={val.price}
        onChange={onPriceChange}
        className={styles.first}
        placeholder="填写课程售价"
        addonAfter="¥"
      />
      <Select
        value={val.staging}
        onChange={onStagingChange}
        dropdownClassName="cn-select-dropdown-container"
        placeholder="选择是否分期"
      >
        {(options || _options).map(({ label, value }) => (
          <Select.Option key={value}>{label}</Select.Option>
        ))}
      </Select>
    </div>
  );
};

export default Index;
